import { Input, InputNumber, Select } from "antd";
import ArrayInput from "./inputs/ArrayInput";
import ValidInput from "./inputs/ValidInput";

export interface EditParamProps {
    value: unknown;
    defaultValue: unknown;
    demoValue?: unknown;
    optionList?: (string | null)[];
    validValue?: (value: unknown) => string | null;
    onChange: (value: unknown) => void;
}

export default function EditParam(props: EditParamProps) {
    return (
        <div>
            <h3>配置值:</h3>
            {props.optionList == undefined && (
                <>
                    {props.validValue == undefined && (
                        <>
                            {Array.isArray(props.defaultValue) == true && (
                                <ArrayInput valueList={props.value as string[]} onChange={valueList => props.onChange(valueList)} />
                            )}
                            {(typeof props.defaultValue == "boolean" || typeof props.demoValue == "boolean") && (
                                <Select style={{ width: "100%" }} value={props.value}>
                                    {props.defaultValue == null && (
                                        <Select.Option value={null}>&lt;None&gt;</Select.Option>
                                    )}
                                    <Select.Option value={true}>打开</Select.Option>
                                    <Select.Option value={false}>关闭</Select.Option>
                                </Select>
                            )}
                            {(typeof props.defaultValue == "string" || typeof props.demoValue == "string") && (
                                <Input value={props.value == null ? "" : props.value as string} onChange={e => {
                                    e.stopPropagation();
                                    e.preventDefault();
                                    if (e.target.value == "" && props.defaultValue == null) {
                                        props.onChange(null);
                                    } else {
                                        props.onChange(e.target.value);
                                    }
                                }} />
                            )}
                            {(typeof props.defaultValue == "number" || typeof props.demoValue == "number") && (
                                <InputNumber value={props.value as null | number} precision={0} controls={false} />
                            )}
                        </>
                    )}
                    {
                        props.validValue !== undefined && (
                            <ValidInput value={props.value} defaultValue={props.defaultValue} validValue={props.validValue} onChange={value => props.onChange(value)} />
                        )
                    }
                </>
            )}
            {props.optionList !== undefined && (
                <Select style={{ width: "100%" }} mode={Array.isArray(props.defaultValue) ? "multiple" : undefined} value={props.value}
                    onChange={value => props.onChange(value)}>
                    {props.optionList.map(item => (
                        <Select.Option key={item} value={item}>{item == null ? "<None>" : item}</Select.Option>
                    ))}
                </Select>
            )}
        </div>
    );
}